<template>
  <div class="box">
    <el-row :gutter="20">
      <el-col :lg="4" :md="8" :sm="24" :xl="4" :xs="24">
        <vab-card>
          <el-tree
            v-if="dataJSON"
            :data="dataJSON"
            default-expand-all
            highlight-current
            node-key="route"
            :current-node-key="`${fatherRoute}-${currentNodeKey.icon}`"
            @node-click="handleNodeClick"
          />
        </vab-card>
      </el-col>
      <el-col :lg="20" :md="16" :sm="24" :xl="20" :xs="24">
        <vab-card v-loading="loading">
          <img
            class="hostPreview"
            :src="`${ossURlZjk}/dms/admin/home/${fatherRoute}/${currentNodeKey.icon}.png`"
            alt=""
            srcset=""
          />
        </vab-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
  defineOptions({
    name: 'GuideIndex',
  })

  import { ossURlZjk } from '~/src/config'
  import { treeJSON } from './components/index.ts'
  import { StrSplit } from '~/src/utils/utils'

  const dataJSON = ref<any>(null)

  const fatherRoute = ref<any>('needCreate')
  const currentNodeKey = ref<any>({ icon: 'overview' })

  const loading = ref(false)

  /**
   *
   * @method
   */
  const handleNodeClick = (row: any) => {
    loading.value = true

    // 父级
    if (row.children) {
      fatherRoute.value = row.route
      currentNodeKey.value = row.children[0]
    } else {
      // 子集
      fatherRoute.value = StrSplit(row.route, '-', 0)
      currentNodeKey.value = row
    }

    setTimeout(() => {
      loading.value = false
    }, 300)
  }

  onActivated(() => {
    dataJSON.value = treeJSON()
  })
</script>

<style lang="scss" scoped>
  .box {
    header {
      position: relative;
      .event {
        position: absolute;
        left: 126px;
        top: 206px;
        width: 806px;
        display: flex;
        flex-wrap: wrap;
        span {
          display: inline-block;
          width: 402px;
          height: 32px;
          // background-color: #000;
          margin-bottom: 26px;
          cursor: pointer;
        }
      }
    }
    .hostPreview {
      display: inline-block;
      width: 100%;
    }
  }

  @media screen and (max-width: 1440px) {
    header {
      position: relative;
      .event {
        position: absolute;
        left: 92px !important;
        top: 152px !important;
        width: 582px !important;
        display: flex;
        flex-wrap: wrap;
        span {
          display: inline-block;
          width: 290px !important;
          height: 26px !important;
          // background-color: #000 !important;
          margin-bottom: 10px !important;
        }
      }
    }
  }
</style>
./components
